import './App.scss'
import { Menu, Button } from 'antd'
import { lazy, Suspense, useEffect, useState } from 'react'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import "@grapecity/wijmo.cultures/wijmo.culture.zh"
import '@grapecity/wijmo.touch'
import { catalogue } from './Data'

const App = () => {

  const [Active, setActive] = useState('')
  const [Page, setPage] = useState()

  const [collapsed, setCollapsed] = useState(false)




  useEffect(() => {
    if (Active.key) setPage(lazy(() => import(`./page/Wijmo${Active.key}.jsx`)))
  }, [Active])

  return (
    <Suspense>
      <div className='App'>
        <div className='left'>
          <Menu
            onClick={setActive}
            style={{ width: collapsed ? 'auto' : 240 }}
            mode="inline"
            items={catalogue}
            inlineCollapsed={collapsed}
          />
          <Button block ghost onClick={() => setCollapsed(e => { return !e })}>
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </Button>
        </div>
        <div className="right">
          {Page ? <Page /> : <div className='Home'>WiJmo.js</div>}
        </div>
      </div>
    </Suspense>
  );
};

export default App;